<template>
  <view class="container">
    <!--    </view>-->
    <view class="filter">
      <picker class="picker" mode="selector" :range="statusOptions" @change="onStatusChange">
        <view>{{ currentStatus }}</view>
      </picker>
    </view>
    <view v-for="request in filteredRequests" :key="request.requestIdWbxqy">
      <uni-group mode="card" :title="request.statusWbxqy==='A'?'当前用车':'非当前用车'">
        <view class="CarRequest-card">
          <view>
            <image :src="request.user.avatarUrlWbxqy" class="avatar"/>
          </view>
          <view class="info">
            <text class="username">{{ request.user.usernameWbxqy }}</text>
            <text class="details">{{ request.car.brandWbxqy }} - {{ request.car.modelWbxqy }} -
              {{ request.car.licensePlateWbxqy }}
            </text>
            <text class="details">司机: {{ request.driver.usernameWbxqy }}</text>
            <text class="date">申请日期: {{ request.requestDateWbxqy }}</text>
            <text class="date">开始时间: {{ request.startTimeWbxqy }}</text>
            <text class="date">结束时间: {{ request.endTimeWbxqy }}</text>
            <view style="display: flex;justify-content: space-between;align-items: center;margin-top: 10px">
              <view>
                <uni-tag :text="getStatusText(request.statusWbxqy)"/>
              </view>
              <view>
                <uni-tag text="查看详情" type="primary" :inverted="true"
                         @click="viewCurrentCarDetails(request)"
                />
              </view>
            </view>
          </view>
        </view>
      </uni-group>
    </view>
  </view>
</template>

<script setup>
import {computed, onMounted, ref} from 'vue'
import {listCarRequests} from "../../api/carRequestMG"; // 请根据你的项目实际路径调整导入

// 用车申请列表
const carRequests = ref([])

// 获取用车申请数据
const fetchCarRequests = async () => {
  try {
    // 请替换为实际的获取用车申请数据的接口
    carRequests.value = await listCarRequests()
  } catch (error) {
    console.error('Failed to fetch car requests:', error)
  }
}

// 在组件挂载时获取数据
onMounted(() => {
  fetchCarRequests()
})

// 筛选状态选项
const statusOptions = ['所有', '待审核', '已批准', '已拒绝']
const currentStatus = ref(statusOptions[0])

// 过滤后的用车申请
const filteredRequests = computed(() => {
  if (currentStatus.value === '所有') {
    return carRequests.value
  }
  return carRequests.value.filter(request => getStatusText(request.statusWbxqy) === currentStatus.value)
})

// 获取状态文本
const getStatusText = (status) => {
  switch (status) {
    case 'S':
      return '待审核'
    case 'A':
      return '已批准'
    case 'R':
      return '已拒绝'
    case 'E':
      return '已结束'
    default:
      return '未知状态'
  }
}

// 状态筛选变化处理
const onStatusChange = (e) => {
  currentStatus.value = statusOptions[e.detail.value]
}

// 查看详情方法
// 查看当前用车详情
const viewCurrentCarDetails = (currentCar) => {
  console.log(currentCar)
  uni.navigateTo({
    url: `/pages/user/CarRequestManage/TripList?requestId=${currentCar.requestIdWbxqy}&showAdd=${false}`
  })
  // 这里可以跳转到当前用车详情页面
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #f5f5f5;
}

.filter {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
}

.picker {
  width: 100%;
  padding: 10px;
  text-align: right;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.request-card {
  display: flex;
  flex-direction: row;
  padding: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 25px;
  margin-right: 10px;
}

.info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.username {
  font-size: 16px;
  font-weight: bold;
}

.details {
  font-size: 14px;
  color: #555;
}

.date, .status {
  font-size: 12px;
  color: #999;
}
</style>
